<script setup>
import { ref } from 'vue'

const kits = ref([
  {
    id: 1,
    taskId: 1,
    taskName: '设备维修',
    requiredTools: ['扳手', '螺丝刀', '测量仪'],
    requiredMaterials: ['润滑油', '密封圈', '轴承'],
    toolsStatus: {
      '扳手': true,
      '螺丝刀': true,
      '测量仪': false
    },
    materialsStatus: {
      '润滑油': true,
      '密封圈': true,
      '轴承': false
    },
    checkDate: '2024-03-15',
    checker: '王五',
    status: '未齐套'
  },
  {
    id: 2,
    taskId: 2,
    taskName: '零件加工',
    requiredTools: ['车床', '铣床', '测量仪'],
    requiredMaterials: ['钢材', '刀具', '冷却液'],
    toolsStatus: {
      '车床': true,
      '铣床': true,
      '测量仪': true
    },
    materialsStatus: {
      '钢材': true,
      '刀具': true,
      '冷却液': true
    },
    checkDate: '2024-03-16',
    checker: '李四',
    status: '已齐套'
  }
])

const dialogVisible = ref(false)
const selectedKit = ref(null)
const newTool = ref('')
const newMaterial = ref('')

const handleAdd = () => {
  dialogVisible.value = true
  selectedKit.value = {
    taskId: '',
    taskName: '',
    requiredTools: [],
    requiredMaterials: [],
    toolsStatus: {},
    materialsStatus: {},
    checkDate: new Date().toISOString().split('T')[0],
    checker: '',
    status: '未齐套'
  }
}

const handleAddTool = () => {
  if (newTool.value && !selectedKit.value.requiredTools.includes(newTool.value)) {
    selectedKit.value.requiredTools.push(newTool.value)
    selectedKit.value.toolsStatus[newTool.value] = false
    newTool.value = ''
  }
}

const handleAddMaterial = () => {
  if (newMaterial.value && !selectedKit.value.requiredMaterials.includes(newMaterial.value)) {
    selectedKit.value.requiredMaterials.push(newMaterial.value)
    selectedKit.value.materialsStatus[newMaterial.value] = false
    newMaterial.value = ''
  }
}

const handleSubmit = () => {
  if (selectedKit.value) {
    kits.value.push({
      id: kits.value.length + 1,
      ...selectedKit.value
    })
    dialogVisible.value = false
    selectedKit.value = null
  }
}

const handleCheck = (kit, type, item) => {
  const index = kits.value.findIndex(k => k.id === kit.id)
  if (index !== -1) {
    if (type === 'tool') {
      kits.value[index].toolsStatus[item] = !kits.value[index].toolsStatus[item]
    } else {
      kits.value[index].materialsStatus[item] = !kits.value[index].materialsStatus[item]
    }
    
    // 检查是否全部齐套
    const allToolsReady = Object.values(kits.value[index].toolsStatus).every(status => status)
    const allMaterialsReady = Object.values(kits.value[index].materialsStatus).every(status => status)
    kits.value[index].status = (allToolsReady && allMaterialsReady) ? '已齐套' : '未齐套'
  }
}
</script>

<template>
  <div class="kit-check">
    <div class="header">
      <h2>齐套检查</h2>
      <el-button type="primary" @click="handleAdd">添加检查单</el-button>
    </div>

    <el-table :data="kits" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="taskName" label="任务名称" />
      <el-table-column label="所需工具">
        <template #default="scope">
          <el-tag
            v-for="tool in scope.row.requiredTools"
            :key="tool"
            :type="scope.row.toolsStatus[tool] ? 'success' : 'danger'"
            style="margin-right: 5px"
            @click="handleCheck(scope.row, 'tool', tool)"
          >
            {{ tool }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="所需材料">
        <template #default="scope">
          <el-tag
            v-for="material in scope.row.requiredMaterials"
            :key="material"
            :type="scope.row.materialsStatus[material] ? 'success' : 'danger'"
            style="margin-right: 5px"
            @click="handleCheck(scope.row, 'material', material)"
          >
            {{ material }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="checkDate" label="检查日期" />
      <el-table-column prop="checker" label="检查人" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.status === '已齐套' ? 'success' : 'danger'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="添加检查单" width="600px">
      <el-form :model="selectedKit" label-width="100px">
        <el-form-item label="任务名称">
          <el-input v-model="selectedKit.taskName" />
        </el-form-item>
        <el-form-item label="所需工具">
          <div style="display: flex; margin-bottom: 10px">
            <el-input v-model="newTool" placeholder="输入工具名称" style="width: 200px" />
            <el-button @click="handleAddTool">添加</el-button>
          </div>
          <el-tag
            v-for="tool in selectedKit.requiredTools"
            :key="tool"
            closable
            @close="selectedKit.requiredTools = selectedKit.requiredTools.filter(t => t !== tool)"
          >
            {{ tool }}
          </el-tag>
        </el-form-item>
        <el-form-item label="所需材料">
          <div style="display: flex; margin-bottom: 10px">
            <el-input v-model="newMaterial" placeholder="输入材料名称" style="width: 200px" />
            <el-button @click="handleAddMaterial">添加</el-button>
          </div>
          <el-tag
            v-for="material in selectedKit.requiredMaterials"
            :key="material"
            closable
            @close="selectedKit.requiredMaterials = selectedKit.requiredMaterials.filter(m => m !== material)"
          >
            {{ material }}
          </el-tag>
        </el-form-item>
        <el-form-item label="检查人">
          <el-input v-model="selectedKit.checker" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.kit-check {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.el-tag {
  cursor: pointer;
  margin-bottom: 5px;
}
</style> 